<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <!--v-for三种用法：-->
    <!--1.迭代数组，-->
    <!--2.迭代对象中的属性-->
    <!--3.迭代数字-->


    <div id="app">
        <p>{{list[0]}}</p>
        <p>下面正式开始了:1迭代普通数组</p>
        <p v-for="item in list">{{ item }}</p>
        <p>下面输出索引值</p>
        <p v-for="(item , i) in list">索引值:{{ i }} --每一项：{{item}}</p>
        <h2>迭代对象数组</h2>
        <!--这里的xxxinyyy：yyy必须为下面list的名字，xxx必须和后面的xxx.id统一-->
        <p v-for="user in userList">id=={{user.id}}-->name=={{user.name}}</p>
        <!--下面是带索引的例子-->
        <p v-for="(user , i) in userList">id=={{user.id}}-->name=={{user.name}}--->索引=={{i}}</p>
        <h2>v-for循环对象身上的每一个键值对属性</h2>
        <p v-for="(value , key , i) in man">第一个值是value={{value}},第二个值是key={{key}},索引=={{i}}</p>
        <p>注意哈 1.value在前，key在后，最后一个仍然是索引，索引可写可不写</p>
        <h2 :style="notice">v-for迭代数字 注意count值会从1开始</h2>
        <!--in后面我们放过普通数组，对象数组，对象，还可以放数字-->
        <p v-for="count in 10">这是第{{count}}次循环</p>
        <h1>使用v-for的注意事项</h1>
        <h1 :style="notice">注意事项<br/>1.v-for循环时候key属性只能使用number或者string。<br/>2.key属性在使用的时候也需要v-bind属性绑定的形式
        ，指定key的值<br/>3.在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的时候指定唯一的字符串或者数字类型的key值
        </h1>

        <div>
            <label>id:
                <input type="text" v-model="id">
            </label>
            <label>name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="添加" @click="add">

        </div>
        <p v-for="item in manList" :key="item.id">
            id==={{item.id}}
            <input type="checkbox">
            {{item.name}}
        </p>



    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[1,2,3,4,5],
                userList:[
                    {id:1 , name:'zs11'},
                    {id:2 , name:'zs12'},
                    {id:3 , name:'zs13'},
                    {id:4 , name:'zs14'},
                    {id:5 , name:'zs15'},
                ],
                man:{name:"yangamao" , sex:"男" , age:26},
                notice:{'color':'red' , 'font-style':'italic'},
                manList:[
                    {id:1 , name:"嘻嘻嘻1"},
                    {id:2 , name:"嘻嘻嘻2"},
                    {id:3 , name:"嘻嘻嘻3"},
                    {id:4 , name:"嘻嘻嘻4"},
                ],
                id:'',
                name:''
            },
            methods:{
                add(){
                    // this.manList.push({id:this.id , name:this.name})
                    this.manList.unshift({id:this.id , name:this.name})
                    //当使用unshift的时候，会发现前面的勾选框出了问题，所以需要指定唯一key来解决，必须是number或者string
                }
            }
        })

    </script>
</body>
</html>